<!DOCTYPE html>
<html>
<head>
	<title>Perfekta Site Theme Manual</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
</head>
<body style="padding-top: 70px;" data-spy="scroll" data-target=".sidebar">
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Perfekta Site Theme Manual</a>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav pull-right">
					<li><a href="#">Introduction</a></li>
					<li><a href="#html">HTML</a></li>
					<li><a href="#css">CSS</a></li>
					<li><a href="#js">Javascript</a></li>
					<li><a href="#credits">Credits</a></li>
				</ul>
			</div><!--/.nav-collapse -->
		</div>
	</div>

	<div class="container">

		<div class="row">
			<div class="col-sm-12">

				<div class="jumbotron">
					<h1>Perfekta Site Theme</h1>
					<p>
						Documentation by Coffeecream Themes<br>
						Created: 20/11/2013<br>
						Email: <a href="mailto:info@coffeecreamthemes.com">info@coffeecreamthemes.com</a>
					</p>
					<hr>
					<p>
						Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, 
						please feel free to email via my user page contact form <a href="http://themeforest.net/user/Coffeecream" target="_blank">here</a>. Thanks so much!
					</p>
				</div>

				<h2 id="html">1. HTML files and tructure</h2>
				<p>This theme is a fixed layout with two columns. The general template structure is the same throughout the template.</p>
				<pre class="prettyprint linenums">
&lt;!-- Fixed navbar --&gt;
&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
  &lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;

      ## LOGO GOES HERE ##

    &lt;/div&gt;
    &lt;div class="navbar-collapse collapse"&gt;

      ## TOP MENU GOES HERE ##

    &lt;/div&gt;&lt;!--/.navbar-collapse --&gt;
  &lt;/div&gt;&lt;!--/.container --&gt;
&lt;/div&gt;&lt;!--/.navbar --&gt;

&lt;!-- Content Start --&gt;
&lt;div class="container"&gt;
  &lt;div class="row row-margin no-fade"&gt;
    &lt;!-- Article Start --&gt;
      &lt;div class="col-sm-8"&gt;
        &lt;article&gt;
    
          ## MAIN CONTENT GOES HERE ##
    
        &lt;/article&gt;
      &lt;/div&gt;
    &lt;!-- Article End --&gt;
    &lt;!-- Column Start --&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;aside&gt;

          ## SIDE WIDGETS GO HERE ##

        &lt;/aside&gt;
      &lt;/div&gt;
    &lt;!-- Column End --&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- Content End --&gt;

&lt;!-- Prefooter Start --&gt;
&lt;div class="prefooter"&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;

      ## BOTTOM WIDGET GOE HERE ##

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- Prefooter End --&gt;

&lt;!-- Footer Start --&gt;
&lt;footer&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;

      ## FOOTER GOES HERE ##

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/footer&gt;</pre>

				<h2 id="html">1.1. Navigation</h2>
				<p>Site navigation is found in &lt;ul class="nav navbar-nav"&gt; inside .navbar div. To create main menu items, add list elements to &lt;ul class="nav navbar-nav"&gt;. You can add sub menu items to the main menu items adding an ul tag with list elements inside. You also have to add the parent class to the parent li elements. Adding current class to list elements makes the menu item selected/highlighted.</p>
				<pre class="prettyprint linenums">
&lt;ul class="nav navbar-nav"&gt;
  &lt;li class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Home &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Full Width Slider&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index-fullscreen.html"&gt;Full Screen Slide&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index-fixed.html"&gt;Fixed Width Slider&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index-bootstrap-fullwidth.html"&gt;Full Width Bootstrap Carousel&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index-bootstrap-fixedwidth.html"&gt;Fixed Width Bootstrap Carousel&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index-image-text.html"&gt;Static Image and Text Banner&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index-image.html"&gt;Static Image Banner&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Pages &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="features.html"&gt;Features&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="member.html"&gt;Team Member&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="leftcolumn.html"&gt;Left Column&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="rightcolumn.html"&gt;Right Column&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Portfolio &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="portfolio1.html"&gt;1 Columns&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="portfolio2.html"&gt;2 Columns&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="portfolio3.html"&gt;3 Columns&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="portfolio4.html"&gt;4 Columns&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="project.html"&gt;Single Project Page&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Blog &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="blog.html"&gt;Post List&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="post.html"&gt;Single Post&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Shop &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="shop.html"&gt;Product List&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="products.html"&gt;Product Details&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="basket.html"&gt;Basket&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="checkout.html"&gt;Checkout&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>

				<h2 id="html">1.2. Side Widgets</h2>
				<p>Side widgets are found in "aside" tag. The general widget structure is the same for all widgets. Every widgets has &lt;h5&gt; header and a content as you can see below, e.g. list of items. Widgets are separated by horizontal rule &lt;hr&gt;</p>
				<pre class="prettyprint linenums">
&lt;aside&gt;

  &lt;h5&gt;&lt;i class="fa fa-bars fa-lg"&gt;&lt;/i&gt;Submenu&lt;/h5&gt;
  &lt;ul class="submenu"&gt;
    &lt;li&gt;&lt;a href="typography.html"&gt;Typography&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="tables.html"&gt;Tables&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="prices.html"&gt;Prices&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="columns.html"&gt;Columns&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="buttons.html"&gt;Buttons&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="tabs.html"&gt;Tabs &amp;amp; Accordions&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="rightcolumn.html"&gt;Right Column&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="leftcolumn.html"&gt;Left Column&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="withbanner.html"&gt;With Banner&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

  &lt;hr&gt;

  &lt;h5&gt;&lt;i class="fa fa-folder-open fa-lg"&gt;&lt;/i&gt; Categories&lt;/h5&gt;
  &lt;ul class="submenu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Business&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Marketing&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sales&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

  &lt;hr&gt;

  &lt;h5&gt;&lt;i class="fa fa-archive fa-lg"&gt;&lt;/i&gt; Archive&lt;/h5&gt;
  &lt;ul class="submenu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;December 2013&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;November 2013&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;October 2013&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;September 2013&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

&lt;/aside&gt;</pre>

				<hr>
				
				<h2 id="css">2. CSS files and stucture</h2>
				<p>The following css files are used in every template html file. They can be found in the HEAD section of the page. Style.css and bootstrap.min.css are the template css files, the other ones are the Google fonts, Owl Carsouel, Fancybox and Awesome Font icons css files.</p>
				<pre class="prettyprint linenums">
&lt;head&gt;

  &lt;!-- Bootstrap --&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;

  &lt;!-- Custom CSS --&gt;
  &lt;link href="css/style.css" rel="stylesheet" media="screen"&gt;

  &lt;!-- Owl Carousel stylesheet --&gt;
  &lt;link href="css/owl.carousel.css" rel="stylesheet"&gt;

  &lt;!-- Owl Carousel Default Theme --&gt;
  &lt;link href="css/owl.theme.css" rel="stylesheet"&gt;

  &lt;!-- Fancybox --&gt;
  &lt;link href="css/jquery.fancybox.css" rel="stylesheet"&gt;

  &lt;!-- Google Fonts --&gt;
  &lt;link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Bree+Serif" rel="stylesheet"&gt;

  &lt;!-- Font Awesome Icons --&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css" rel="stylesheet"&gt;

&lt;/head&gt;</pre>
				
				<h2 id="css">2.1. Change Google font</h2>
				<p>Google font can be easily replaced in 2 simple steps:</p>
				<ol>
					<li>Edit the template file.</li>
					<li>Replace the css file for <a href="http://www.google.com/fonts/specimen/PT+Sans" target="_blank">"PT Sans"</a> font with yours (e.g. <a href="http://www.google.com/fonts/specimen/Open+Sans" target="_blank">Open Sans</a>), as you can see below.</li>
				</ol>
				<pre class="prettyprint linenums">
&lt;head&gt;
  ...
  &lt;!-- Google Fonts --&gt;
  &lt;link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Bree+Serif" rel="stylesheet"&gt;
  ...
&lt;/head&gt;</pre>
				
				<hr>
				
				<h2 id="js">3. Javascript files and structure</h2>
				<p>This template requires the following javascript files. You should place them at the end of every template html file, just before the closing &lt;/body&gt; tag. All the script and plugin settings are in two files - "settings-home.js" and "settings-inner.js"</p>

				<pre class="prettyprint linenums">
&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
&lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;

&lt;!-- Bootstrap Plugins --&gt;
&lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;!-- Owl Carousel Plugin --&gt;
&lt;script src="js/owl.carousel.js"&gt;&lt;/script&gt;

&lt;!-- Fancybox Plugin --&gt;
&lt;script src="js/jquery.fancybox.js"&gt;&lt;/script&gt;

&lt;!-- Bootstrap Progress Bar --&gt;
&lt;script src="js/bootstrap-progressbar.js"&gt;&lt;/script&gt;

&lt;!-- MixItUp Plugin --&gt;
&lt;script src="js/jquery.mixitup.js"&gt;&lt;/script&gt;

&lt;!-- Settings --&gt;
&lt;script src="js/settings-inner.js"&gt;&lt;/script&gt;</pre>

				<h2 id="js">3.1. Plugins overview</h2>
				<p>Most of the functions are inbuilt in Bootstrap JS file, but there is also few additional plugins.</p>
				<div class="table-responsive">
					<table class="table table-bordered table-striped">
						<colgroup>
							<col class="col-xs-3">
							<col class="col-xs-9">
						</colgroup>
						<thead>
							<tr>
								<th>Script</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>jquery.js</td>
								<td>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.<br><a href="http://jquery.com/" target="_blank">Click here for more info and full documentation</a></td>
							</tr>
							<tr>
								<td>bootstrap.min.js</td>
								<td>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.<br><a href="http://getbootstrap.com/" target="_blank">Click here for more info and full documentation</a></td>
							</tr>
							<tr>
								<td>
									jquery.themepunch.plugins.min.js<br>
									jquery.themepunch.revolution.js
								</td>
								<td>Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs. You will find full plugin documentation in "Slider Revolution" folder.</td>
							</tr>
							<tr>
								<td>owl.carousel.js</td>
								<td>Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.<br><a href="http://owlgraphic.com/owlcarousel/" target="_blank">Click here for more info and full documentation</a></td>
							</tr>
							<tr>
								<td>jquery.fancybox.js</td>
								<td>fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.<br><a href="http://fancyapps.com/fancybox/" target="_blank">Click here for more info and full documentation</a></td>
							</tr>
							<tr>
								<td>bootstrap-progressbar.js</td>
								<td>bootstrap-progressbar is a jQuery plugin which extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.<br><a href="https://github.com/minddust/bootstrap-progressbar" target="_blank">Click here for more info and full documentation</a></td>
							</tr>
							<tr>
								<td>jquery.mixitup.js</td>
								<td>MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content! <br><a href="http://mixitup.io/" target="_blank">Click here for more info and full documentation</a></td>
							</tr>
						</tbody>
					</table>
				</div>
				
				<h2 id="css">3.2. Customise map</h2>
				<p>This template uses Google Maps. You can set multiple custom loacations, pin images, map color and many more things.<br>
				<a href="https://developers.google.com/maps/documentation/javascript/" target="_blank">Click here for more info and full documentation</a></p>
				<pre class="prettyprint linenums">
&lt;!-- Google Map Script --&gt;<br />&lt;script type="text/javascript"&gt;

  ...

  var styles = [
    {
      stylers: [
        { hue: "#ffd200" }, &lt;---- Map Color
        { saturation: 0 } &lt;---- Map Saturation
      ]
    },{
      featureType: "road", &lt;---- Map Type
      elementType: "geometry",
      stylers: [
        { lightness: 100 }, &lt;---- Map Lightness
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  ...

  var mapOptions = {
  zoom: 4, &lt;---- Map Zoom
  center: new google.maps.LatLng(51.4597167, 14.6256667), &lt;---- Map center position

...

  var places = [ &lt;---- Pin coordinates
    ['Moscow', 55.7600667, 37.6194667, 1],
    ['Warsaw', 52.2393167, 21.0214167, 1],
    ['Berlin', 52.52665, 13.3858, 1],
    ['Paris', 48.8582333, 2.3518167, 1]
  ];

...

&lt;/script&gt;</pre>
				
				<hr>
				
				<h2 id="credits">4. Resources and credits</h2>
				<p>Following sources has been used.</p>

				<h4>Fonts</h4>
				<ul>
					<li><a href="http://www.google.com/fonts/specimen/PT+Sans" target="_blank">PT Sans</a></li>
					<li><a href="http://www.google.com/fonts/specimen/Bree+Serif" target="_blank">Bree Serif</a></li>
				</ul>
				
				<h4>Images</h4>
				<ul>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-20274536-fresh-and-confident-corporate-assistant.php" target="_blank">
						Fresh and confident corporate assistant</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=5074674" target="_blank">Squaredpixel Productions</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-17732468-business-woman-using-cellphone.php" target="_blank">
						Business woman using cellphone</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=5074674" target="_blank">Squaredpixel Productions</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-20064338-elegant-and-effective-member-of-the-team.php" target="_blank">
						Elegant and effective member of the team</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=5074674" target="_blank">Squaredpixel Productions</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-26061130-smiling-young-business-woman.php" target="_blank">
						Smiling young business woman</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=8443754" target="_blank">stokkete</a>
					</li>
					<li>
						<a href="http://photodune.net/item/new-technologies-at-the-workplace/2110997" target="_blank">
						New Technologies At The Workplace</a>
						by <a href="http://photodune.net/user/Bloomua" target="_blank">Bloomua</a>
					</li>
					<li>
						<a href="http://photodune.net/item/writing/369345" target="_blank">
						Writing</a>
						by <a href="http://photodune.net/user/Pressmaster" target="_blank">Pressmaster</a>
					</li>
					<li>
						<a href="http://photodune.net/item/mobile-phone-in-hand/2473721" target="_blank">
						Mobile phone in hand</a>
						by <a href="http://photodune.net/user/Bloomua" target="_blank">Bloomua</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-15123028-successful-business-plan.php" target="_blank">
						Successful business plan</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=5078009" target="_blank">STEEX</a>
					</li>
					<li>
						<a href="http://photodune.net/item/studio-portrait-of-young-man-wearing-shirt-and-tie/319539" target="_blank">
						Studio Portrait Of Young Man Wearing Shirt And Tie</a>
						by <a href="http://photodune.net/user/monkeybusiness" target="_blank">monkeybusiness</a>
					</li>
					<li>
						<a href="http://photodune.net/item/business-model/345312" target="_blank">
						Business Model</a>
						by <a href="http://photodune.net/user/eastwestimaging" target="_blank">eastwestimaging</a>
					</li>
					<li>
						<a href="http://photodune.net/item/fashion-man/1451078" target="_blank">
						Fashion man</a>
						by <a href="http://photodune.net/user/CURAphotography" target="_blank">CURAphotography</a>
					</li>
					<li>
						<a href="http://photodune.net/item/beautiful-fashion-woman/918032" target="_blank">
						Beautiful Fashion Woman</a>
						by <a href="http://photodune.net/user/keeweeboy" target="_blank">keeweeboy</a>
					</li>
					<li>
						<a href="http://photodune.net/item/casual-male-fashion/gone/1629720" target="_blank">
						casual male fashion</a>
						by <a href="http://photodune.net/user/andreasgradin" target="_blank">andreasgradin</a>
					</li>
					<li>
						<a href="http://photodune.net/item/asian-woman/404567" target="_blank">
						Asian woman</a>
						by <a href="http://photodune.net/user/disorderly" target="_blank">disorderly</a>
					</li>
					<li>
						<a href="http://photodune.net/item/male-fashion/2317673" target="_blank">
						male fashion</a>
						by <a href="http://photodune.net/user/andreasgradin" target="_blank">andreasgradin</a>
					</li>
					<li>
						<a href="http://photodune.net/item/young-woman/1660965" target="_blank">
						Young woman</a>
						by <a href="http://photodune.net/user/velkol" target="_blank">velkol</a>
					</li>
					<li>
						<a href="http://photodune.net/item/apocalyptic-view-of-berlin-skyline/3190102" target="_blank">
						Apocalyptic View of Berlin Skyline</a>
						by <a href="http://photodune.net/user/SOMATUSCANI" target="_blank">SOMATUSCANI</a>
					</li>
					<li>
						<a href="http://photodune.net/item/students-writing-at-highschool-exam-teens-study/3161371" target="_blank">
						Students writing at high-school exam teens study</a>
						by <a href="http://photodune.net/user/CandyBoxImages" target="_blank">CandyBoxImages</a>
					</li>
					<li>
						<a href="http://photodune.net/item/smiling-woman-resting-on-couch/654630" target="_blank">
						Smiling woman resting on couch</a>
						by <a href="http://arcurs.com/" target="_blank">Yuri_Arcurs</a>
					</li>
					<li>
						<a href="http://photodune.net/item/pretty-young-brunette-looking-away-laughing/210211" target="_blank">
						Pretty Young Brunette Looking Away, Laughing</a>
						by <a href="http://arcurs.com/" target="_blank">Yuri_Arcurs</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-11324316-happy-mid-adult-woman-embracing-her-husband.php" target="_blank">
						Happy mid adult woman embracing her husband</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=10172908" target="_blank">GlobalStock</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-10361595-happy-businesswoman-with-colleagues-in-the-background.php" target="_blank">
						Happy businesswoman with colleagues in the background</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=10204782" target="_blank">Yuri</a>
					</li>
					<li>
						<a href="http://medialoot.com/item/free-responsive-screen-mockup-pack/" target="_blank">
						Responsive Design Mock-up Pack</a>
						by <a href="http://medialoot.com/item/free-responsive-screen-mockup-pack/" target="_blank">Tony Thomas</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-15773435-women-s-secrets.php" target="_blank">
						Women's secrets</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=2519853" target="_blank">AlexanderNovikov</a>
					</li>
					<li>
						<a href="http://www.istockphoto.com/stock-photo-26368580-businesswoman-smiling-at-camera.php" target="_blank">
						Businesswoman smiling at camera</a>
						by <a href="http://www.istockphoto.com/user_view.php?id=1205277" target="_blank">4774344sean</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6276104984/" target="_blank">
						Star Print See-Through Lace Long Sleeve Dress (Black)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6276098482/" target="_blank">
						Knit Print 2-in-1 Long Sleeve Fitted Dress (Forest Green)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6265902940/" target="_blank">
						Sleeveless Velvet Fur Trim Sheath Dress (Black)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6265897774/" target="_blank">
						2-in-1 Knit Long Sleeve Pussybow Dress (Purple)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6259911046/" target="_blank">
						Jacquard Print High Waist 3/4 Sleeve Lace Dress (Black and White)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6259377055/" target="_blank">
						Flaps Detail Lace Sheath Tank Dress (Black)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6259368129/" target="_blank">
						Mottled Print Knit Tiered Frills 2-in-1 Dress (Dark Blue)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/rococo1727/6259097791/" target="_blank">
						Sleeveless Lace Back Slanting Zip Front Knit Sheath Dress (Grey)</a>
						by <a href="http://www.flickr.com/photos/rococo1727/with/6276104984/" target="_blank">AgathaGarcia</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						Active Den</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						Audio Jungle</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						3D Ocean</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						Code Canyon</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						Graphic River</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						Video Hive</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						Theme Forest</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
					<li>
						<a href="http://zoo.envato.com/" target="_blank">
						Photo Dune</a>
						by <a href="http://pasqualedsilva.com/" target="_blank">Pasquale D'Silva</a>
					</li>
				</ul>
				
				<h4>Javascript</h4>
				<p>See point 3.1.</p>

			</div>

		</div>
	</div><!-- /.container -->

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://code.jquery.com/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/bootstrap.min.js"></script>
	<script src="prettify/run_prettify.js"></script>

	<script>
	</script>

</body>
</html>